<template>
  <div class="m-playlist-detail">
    <div class="section">
      <DetailInfo :data="DetailInfo"></DetailInfo>
    </div>
    <div class="section">
      <DetailList :data="DetailListData"></DetailList>
    </div>
  </div>
</template>

<script>
import { onBeforeMount, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import Service from "@/services";
import DetailInfo from "@/components/PlayList/Detail/detailInfo";
import DetailList from "@/components/PlayList/Detail/detailList";
export default {
  name: "Detail",
  components: { DetailInfo, DetailList },
  setup() {
    const service = new Service(),
      router = useRouter(),
      state = reactive({
        id: null,
        DetailData: {},
        DetailInfo: {},
        DetailListData: {},
      });

    onBeforeMount(() => {
      let query = router.currentRoute.value.params;
      state.id = query.id;
      getDetails();
    });
    // 初始化list与info模块的数据
    const init = () => {
      state.DetailInfo = {
        title: state.DetailData.playlist.list_name,
        singername: "无歌手" || state.DetailData.playlist.creator.nickname,
        playcount: state.DetailData.playlist.list_play_count,
        tags:
          state.DetailData.playlist.tags &&
          state.DetailData.playlist.tags.split(","),
        intro: state.DetailData.playlist.list_description,
        songlist: state.DetailData.privileges,
        logo:
          state.DetailData.playlist.list_pic +
          state.DetailData.playlist.list_pic_name,
      };

      state.DetailListData = {
        songlist: state.DetailData.privileges.songlist,
        songnum: state.DetailData.privileges.length,
        // songmids:getSongmids(state.DetailData.songlist),
      };
    };

    // 从数组中整合所有的mid
    const getSongmids = (data) => {
      let oData = [];
      data.forEach((item) => {
        oData.push(item.mid);
      });
      return oData;
    };

    // 获取详情页的数据
    const getDetails = async () => {
      let data = await service.getSongListDetail({
        list_id: state.id,
      });
      state.DetailData = data;
      init();
    };

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang='scss' scoped>
.m-playlist-detail {
}
</style>
